<template>
  <el-dialog v-model="visible" :title="title" :width="width" @open="onOpenDialog" @close="onCloseDialog">
    <slot></slot>
    <template v-if="showButton" #footer>
      <el-button @click="onCancel">取消</el-button>
      <el-button type="primary" @click="onsubmit">{{ submitText }}</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
const props = defineProps({
  win: {
    type: Object,
    required: true,
    default: () => {
      return {
        visible: false,
        title: '',
        width: '30%',
        showButton: true,
        submitText: '确定',
      }
    },
  },
})

// 显示/隐藏
const visible = toRef(props.win, 'visible')

// 标题
const title = toRef(props.win, 'title')
if (DuUtil.isUndefined(title.value)) {
  title.value = ''
}

// 宽度
const width = toRef(props.win, 'width')
if (DuUtil.isUndefined(width.value)) {
  width.value = '30%'
}

// 是否显示footer按钮
const showButton = toRef(props.win, 'showButton')
if (DuUtil.isUndefined(showButton.value)) {
  showButton.value = true
}

// 确定按钮的文字
const submitText = toRef(props.win, 'submitText')
if (DuUtil.isUndefined(submitText.value)) {
  submitText.value = '确定'
}

const emits = defineEmits(['cancel', 'confirm', 'open', 'close'])

// 取消按钮
const onCancel = () => {
  close()
  emits('cancel')
}

// 确定按钮
const onsubmit = () => {
  emits('confirm')
}

// 打开窗口
const onOpenDialog = () => {
  emits('open')
}

// 关闭窗口
const onCloseDialog = () => {
  emits('close')
}

// 打开窗口
const open = () => {
  props.win.visible = true
}

// 关闭窗口
const close = () => {
  props.win.visible = false
}

defineExpose({
  open,
  close,
})
</script>

<style scoped></style>
